<template>
  <div class="custom-slider">
    <div class="slider-container">
      <!-- 刻度标记 -->
      <div class="slider-ticks">
        <div 
          class="slider-tick" 
          v-for="(position, index) in tickPositions" 
          :key="index" 
          :style="{ left: position + '%' }"
        ></div>
      </div>
      
      <!-- 滑块组件 -->
      <a-slider
        v-model="value"
        :min="min"
        :max="max"
        :step="step"
         height="12rpx"
        block-size="20"
        activeColor="#ffce1c"
        inactiveColor="#e4e7ed"
      />
      
    </div>
  </div>
</template>

<script>
 export default {
  name: 'u-slider',
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step:{
      type: Number,
      default: 25
    }
  },
  data() {
    return {
      value: 0,
      tickPositions: [30, 51, 71, 91]
    }
  },
 }
</script>

<style lang="scss" scoped>
.custom-slider {
  // padding: 20px 15px;
  // margin-left: -10rpx;
  
  .slider-container {
    position: relative;
    // height: 60px; /* 增加高度，为标签留出空间 */
  }
  
  /* 刻度标记 */
  .slider-ticks {
    position: absolute;
    top: 50%; /* 垂直居中 */
    left: 0;
    width: 100%;
    height: 6px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1; /* 确保刻度在轨道上方，但在滑块下方 */
    
    .slider-tick {
      position: absolute;
      top: 50%;
      width: 8px;
      height: 8px;
      background-color: #fff;
      border: 2rpx solid #ffce1c; /* 添加边框，使其更明显 */
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    }
  }
  
  /* 刻度标签 */
  .slider-labels {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 10px;
    font-size: 12px;
    color: #909399;
    
    .slider-label {
      position: absolute;
      transform: translateX(-50%);
    }
  }
  
  /* 自定义 u-slider 样式 */
  u-slider {
    height: 40px;
    
    /* 滑块按钮 */
    &::v-deep .u-slider-thumb {
      width: 20px;
      height: 20px;
      background-color: #fff;
      border: 2px solid #409eff;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: all 0.2s;
      z-index: 2; /* 确保滑块在最上层 */
    }
    
    /* 滑块按钮悬停状态 */
    &::v-deep .u-slider-thumb:hover {
      transform: scale(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* 滑块按钮活动状态 */
    &::v-deep .u-slider-thumb:active {
      transform: scale(1.1);
      box-shadow: 0 2px 10px rgba(64, 158, 255, 0.3);
    }
    
    /* 轨道样式 */
    &::v-deep .u-slider-track {
      height: 6px;
      background-color: #e4e7ed;
      border-radius: 3px;
    }
    
    /* 进度条样式 */
    &::v-deep .u-slider-active {
      height: 6px;
      background-color: #409eff;
      border-radius: 3px;
    }
  }
}
</style>